<template>
    <view :style="{ '--color': color }">
        <status-bar title="派单"></status-bar>
        <view class="TabBox" :style="{ top: totalHeight + 'px' }">
            <u-tabs
                :list="tabData"
                :current="current"
                :itemStyle="itemStyle"
                :inactiveStyle="inactiveStyle"
                :activeStyle="activeStyle"
                :lineColor="color"
                :scrollable="false"
                @click="Tabclick"
            ></u-tabs>
        </view>

        <view class="Wrapper">
            <view class="List" v-for="(item, index) in pageData" :key="index" @click="toUrl(`SendDetails?id=${item.repair_id}`)">
                <view class="orderNo">
                    <text class="repair_no">订单编号:{{ item.repair_no }}</text>
                    <view class="orderStom">
                        <view class="lis sha" v-if="item.typeName">{{ item.typeName }}</view>
                        <view class="lis zhens" v-if="item.repairTypeName">{{ item.repairTypeName }}</view>
                    </view>
                </view>

                <view class="shop">
                    <image :src="$imgUrls(item.goods_img)" mode="aspectFill" class="goods_img"></image>
                    <view class="shopBox">
                        <text class="black size28 bold500 ellipsis">{{ item.goods_name }}</text>
                        <view class="dlin">
                            <view class="iconfont icon-shijian black size24 p-right10"></view>
                            <text class="serveTitme ellipsis">预约{{ item.service_time }}上门服务</text>
                        </view>
                        <view class="dlin" @click.stop="openLocation(item)">
                            <view class="iconfont icon-wodedizhi1 black size24 p-right10"></view>
                            <text class="serveTitme ellipsis">{{ item.address }}</text>
                        </view>
                    </view>
                </view>
                <view class="payMentBoX">
                    <view class="payMent" v-if="item.payment > 0">
                        <text class="color_33 size28">服务费用：</text>
                        <text class="color_F4 size24">￥</text>
                        <text class="color_F4 size32">{{ item.payment }}</text>
                    </view>
                    <view class="payMent" v-if="item.state == 7 && item.start_second">
                        <text class="color_33 size28">服务时长：</text>
                        <text class="color_F4 size26">{{ $pop.formatSeconds(item.start_second) }}</text>
                    </view>
                </view>
            </view>
        </view>
        <emptys v-if="!pageData.length"></emptys>

        <u-popup :show="screenVisible" @close="screenVisible = false" mode="right">
            <view class="screenBoxpip" :style="{ 'padding-top': totalHeight + 'px' }" v-if="pageData">
                <view class="screenContent">
                    <view class="list">
                        <text class="name">排序</text>
                        <view class="cateBox">
                            <view class="catelist" :class="{ Active: item.orderWay == orderWay }" v-for="(item, index) in Sorting" :key="index" @click="orderWay = item.orderWay">
                                {{ item.name }}
                            </view>
                        </view>
                    </view>
                    <view class="list">
                        <text class="name">手机号码</text>
                        <view class="TelBox">
                            <input type="number" :maxlength="11" class="Tel_content" v-model="tel" placeholder="用户手机号码" />
                        </view>
                    </view>
                    <view class="list">
                        <text class="name">师傅名称</text>
                        <view class="TelBox">
                            <input type="text" class="Tel_content" v-model="master_name" placeholder="师傅名称" />
                        </view>
                    </view>
                </view>
                <view class="screen_Bot">
                    <view class="li Reset" @click="Reset">重置</view>
                    <view class="li Config" @click="getMaster">确定</view>
                </view>
            </view>
        </u-popup>

        <view class="Screening" @click="screenVisible = true">
            <view class="iconfont icon-a-lujing2835 white size40"></view>
        </view>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    import MannerOrder from '@/zunyi/Api/index.js';
    export default {
        data() {
            return {
                tabData: [],
                tabKey: '',
                current: 0,
                page: 1,
                getMore: true,
                pageData: [],
                screenVisible: false,
                orderWay: '',
                Sorting: [
                    {
                        name: '正序',
                        orderWay: 'asc'
                    },
                    {
                        name: '倒序',
                        orderWay: 'desc'
                    }
                ],
                tel: '',
                master_name: ''
            };
        },
        async onLoad() {
            const requestData = await MannerOrder.GetStaffListCount();
            this.tabKey = requestData.key;
            const listCount = requestData.list || [];
            listCount.forEach((item) => {
                item.name = `${item.name}(${item.num})`;
            });
            this.tabData = listCount;
            this.getOrder();
        },
        methods: {
            async getOrder() {
                const limit = 10;
                const staff_state_value = this.tabData[this.current].value;
                const reuqestObj = {
                    page: this.page,
                    limit,
                    [this.tabKey]: staff_state_value,
                    orderWay: this.orderWay,
                    tel: this.tel,
                    master_name: this.master_name
                };
                const requestData = await MannerOrder.GetrepairOrderList(reuqestObj);
                const result = requestData || [];
                this.page == 1 ? (this.pageData = result) : (this.pageData = [...this.pageData, ...result]);
                if (result.length < limit) this.getMore = false;
            },

            init() {
                this.page = 1;
                this.getMore = true;
                this.$pop.pageScrollTo();
                this.getOrder();
            },

            Tabclick(e) {
                this.current = e.index;
                this.init();
            },
            getMaster() {
                this.init();
                this.screenVisible = false;
            },
            Reset() {
                this.orderWay = '';
                this.tel = '';
                this.master_name = '';
                this.screenVisible = false;
                this.init();
            }
        },
        computed: {
            ...mapState(['color', 'totalHeight']),
            itemStyle() {
                return {
                    height: '44px',
                    color: '#666'
                };
            },
            inactiveStyle() {
                return {
                    color: '#666',
                    fontSize: '28rpx'
                };
            },
            activeStyle() {
                return {
                    color: '#000',
                    fontSize: '28rpx'
                };
            }
        },
        onReachBottom() {
            if (!this.getMore) return;
            this.page++;
            this.getOrder();
        }
    };
</script>

<style lang="scss">
    page {
        background-color: $bgF8;
        padding-bottom: 30rpx;
    }
</style>
<style lang="scss" scoped>
    .Screening {
        width: 80rpx;
        height: 80rpx;
        background-color: var(--color);
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        right: 2rpx;
        top: 40%;
        z-index: 10;
        border-radius: 10rpx;
    }
    .screenBoxpip {
        width: 600rpx;
        height: 100vh;
        display: flex;
        flex-direction: column;
        padding-left: 24rpx;
        padding-right: 24rpx;
        padding-bottom: 40rpx;
        box-sizing: border-box;
        .screenContent {
            width: 100%;
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow-y: scroll;
            .list {
                display: flex;
                flex-direction: column;
                margin-bottom: 36rpx;
                .name {
                    color: #000;
                    font-size: 28rpx;
                }
                .cateBox {
                    width: 100%;
                    margin-top: 20rpx;
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    row-gap: 24rpx;
                    column-gap: 20rpx;

                    .catelist {
                        background-color: #f9f9f9;
                        min-height: 70rpx;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding: 10rpx;
                        font-size: 26rpx;
                        color: #363636;
                        border-radius: 6rpx;
                        overflow: hidden;
                        border: 1px solid #f9f9f9;
                    }
                    .Active {
                        color: var(--color);
                        background-color: rgba(40, 173, 242, 0.1);
                        border: 1px solid var(--color);
                    }
                }
            }
        }
        .screen_Bot {
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin-top: 30rpx;
            .li {
                width: 250rpx;
                height: 76rpx;
                border-radius: 10rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 28rpx;
            }
            .Reset {
                background-color: #eaeaea;
                color: #666666;
            }
            .Config {
                background-color: var(--color);
                color: #fff;
            }
        }
    }
    .TelBox {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .Tel_txt {
            color: #000;
            font-size: 26rpx;
            padding-right: 20rpx;
        }
        .Tel_content {
            flex: 1;
            height: 76rpx;
            padding: 0 20rpx;
            border: 1px solid #ccc;
            background-color: #fff;
            border-radius: 8rpx;
            font-size: 26rpx;
            color: #000;
            margin-top: 20rpx;
        }
    }
    .TabBox {
        width: 100%;
        height: 90rpx;
        background-color: #fff;
        border-top: 1px solid $bgF8;
        position: fixed;
        left: 0;
        z-index: 100;
    }
    .Wrapper {
        padding-top: 90rpx;
    }
    .List {
        width: 710rpx;
        background-color: #fff;
        border-radius: 10rpx;
        padding: 20rpx 20rpx 0 20rpx;
        margin: 24rpx auto;
        .orderNo {
            width: 100%;
            display: flex;
            align-items: center;
            .repair_no {
                flex: 1;
                color: #333333;
                font-size: 24rpx;
            }
            .orderStom {
                display: flex;
                align-items: center;
                .lis {
                    padding: 4rpx 10rpx;
                    font-size: 24rpx;
                    border-radius: 6rpx;
                    margin-left: 12rpx;
                }
                .lis:first-child {
                    margin-left: 0;
                }
                .sha {
                    background-color: #edf5ff;
                    color: var(--color);
                }
                .zhens {
                    background-color: #fff7ed;
                    color: #ffa641;
                }
            }
        }

        .shop {
            width: 100%;
            display: flex;

            padding: 24rpx 0;
            .goods_img {
                width: 144rpx;
                height: 144rpx;
                border-radius: 10rpx;
                margin-right: 24rpx;
            }
            .shopBox {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .dlin {
                    display: flex;
                    align-items: center;
                    margin-top: 10rpx;
                    .serveTitme {
                        flex: 1;
                        color: #666666;
                        font-size: 24rpx;
                    }
                }
            }
        }
        .payMentBoX {
            font-size: 28rpx;
            padding-bottom: 20rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .payMent {
                font-size: 28rpx;
            }
        }

        .caoine {
            width: 100%;
            padding: 20rpx 0;
            display: flex;
            align-items: center;
            border-top: 1px solid #eaeaea;

            .caoTxt {
                flex: 1;
            }
            .caoBtn {
                padding: 14rpx 40rpx;
                background-color: var(--color);
                color: #fff;
                font-size: 24rpx;
                border-radius: 30rpx;
            }
        }
    }
</style>
